<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="展商报名" back></Header>
		<view class="wapper">
			<!-- 轮播图 -->
			<view class="banner">
				<u-swiper :list="bannerList" height="197" mode="dot"></u-swiper>
			</view>
			<!-- form -->
			<view class="form">
				<u-form :model="form" label-position="top" label-width="180" ref="uForm" :label-style="labelStyle">
					<u-row>
						<u-col :span="12">
							<u-form-item label="参展单位(企业)名称" prop="CompanyName" required>
								<u-input :custom-style="inputStyle" v-model="form.CompanyName"
									placeholder="参展单位(企业)名称"></u-input>
							</u-form-item>
						</u-col>

					</u-row>
					<u-row>
						<u-col :span="6">
							<u-form-item label="姓名" prop="PersonName" required>
								<u-input :custom-style="inputStyle" v-model="form.PersonName"
									placeholder="姓名"></u-input>
							</u-form-item>
						</u-col>
						<u-col :span="6">
							<u-form-item label="职务">
								<u-input :custom-style="inputStyle" v-model="form.ZhiWu" placeholder="职务"></u-input>
							</u-form-item>
						</u-col>

					</u-row>
					<u-row>
						<u-col :span="12">
							<u-form-item label="企业地址">
								<u-row>
									<u-col :span="6"><u-input :custom-style="inputStyle" placeholder="省"
											v-model="form.Sheng"></u-input></u-col>
									<u-col :span="6"><u-input :custom-style="inputStyle" placeholder="市"
											v-model="form.Shi"></u-input></u-col>
								</u-row>
							</u-form-item>
							<u-form-item label="详细地址" prop="Address" required>
								<u-input :custom-style="inputStyle" v-model="form.Address" placeholder="地址"></u-input>
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col :span="12">
							<u-form-item label="联系电话" prop="PhoneNumber" required>
								<u-input :custom-style="inputStyle" maxlength="11" type="number"
									v-model="form.PhoneNumber" placeholder="电话"></u-input>
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col :span="12">
							<u-form-item label="企业网址">
								<u-input :custom-style="inputStyle" placeholder="网址"
									v-model="form.CompanyWebsite"></u-input>
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col :span="12">
							<u-form-item label="预定展位">
								<u-row>
									<u-col :span="6">
										<u-input :custom-style="inputStyle" placeholder="区域"
											v-model="form.ChooseAreaId"></u-input>
									</u-col>
									<u-col :span="6">
										<u-input :custom-style="inputStyle" placeholder="编号"
											v-model="form.num"></u-input>
									</u-col>
								</u-row>
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col :span="12">
							<u-form-item label="展品信息" required prop="Product">
								<u-input :custom-style="inputStyle" placeholder="展品信息" v-model="form.Product"></u-input>
							</u-form-item>
						</u-col>
					</u-row>
				</u-form>
				<u-button class="ubtn" @click="submit" :loading="loading"
					style="background-color:#0ed390;color:#fff ;">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				bannerList: [
					banner1
				],
				labelStyle: {
					'letter-spacing': '4rpx',
					'font-size': '32rpx',
					'font-weight': 400,
					'color': '#333333',
				},
				inputStyle: {
					backgroundColor: '#fff'
				},
				form: {
					CompanyName: '',
					PersonName: '',
					ZhiWu: '',
					Sheng: '',
					Shi: '',
					Address: '',
					PhoneNumber: '',
					CompanyWebsite: '',
					ChooseAreaId: '',
					num: '',
					Product: ''
					// OpenID: ''
				},
				loading: false,
				rules: {
					CompanyName: [{
						required: true,
						message: '请输入公司名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					PersonName: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					Address: [{
						required: true,
						message: '请输入地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					Product: [{
						required: true,
						message: '请输入展品信息',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					PhoneNumber: [{
						required: true,
						message: '请输入手机号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						pattern: /^1[3456789]\d{9}$/,
						message: '请输入正确手机号',
						trigger: ['change', 'blur']
					}],
				}
			}
		},
		methods: {
			async submit() {
				this.loading = true
				try {
					let valid = await this.$refs.uForm.validate()
					if (valid) {
						let res = await this.$api.submitInfo(this.form)
						if (res.Status == 0) {
							uni.$u.toast('报名成功!')
							setTimeout(() => {
								this.$router.go(0)
							}, 1000)
						}
					}
					this.loading = false
				} catch (e) {
					//TODO handle the exception
					this.loading = false
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom

		},
		async mounted() {
			// let code = await this.$api.getCode()
			// let res = await this.$api.getOpenId({
			// 	code
			// })
			// if(res.Status == 0){
			// 	this.form.OpenID = res.UserData.openid
			// }
		}
	}
</script>
<style>

</style>
<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		background: #f2f2f2;

		.wapper {
			flex: 1;
			z-index: 100;
			margin-top: -280rpx;
			padding-bottom: 80rpx;

			.banner {
				border-top-left-radius: 60rpx;
				border-top-right-radius: 60rpx;
				overflow: hidden;
			}

			.form {
				padding: 20rpx 40rpx;
			}

			.ubtn {
				margin-top: 50rpx;
			}
		}
	}
</style>